<template>
	<view class="box-user flex flex-col items-center overflow-hidden" @click="anchorIndex(val)">
		<view class="relative flex items-center">
			<view class="text-center job-text vertical-text w-36 py-2 px-4">
				<text class="text-[11rpx] whitespace-nowrap">{{jobQuery(val)}}</text>
			</view>
			<view class="w-92 h-92 overflow-hidden">
				<ImageBoxVue :src="val.headimg" width="100rpx" height="100rpx"></ImageBoxVue>
			</view>
		</view>
		<view class="name w-128 ellipsis text-center">{{val.name}}</view>
	</view>
</template>

<script setup>
	import {
		jobQuery
	} from '@/config/publicFun';

	const {
		val,
	} = defineProps(['val'])

	const anchorIndex = (item) => {
		const id = uni.getStorageSync('user').id
		const userid = item.id
		if (id != userid) {
			uni.navigateTo({
				url: `/pages/user/anchor?id=${item.id}`
			})
		}
	}
</script>

<style lang="scss" scoped>
	.box-user {
		background: #F0EDFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #BADEFF;

		.job-text {
			font-weight: 400;
			font-size: 20rpx;
			color: #18419B;
			line-height: 20rpx;
		}

		.name {
			background: linear-gradient(157deg, #D5CEFF 0%, #65B5FF 100%);
			// border-radius: 0rpx 0rpx 16rpx 16rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 32rpx;
			height: 32rpx;
		}
	}
</style>